<template>
  <div>
    <el-row>
      <el-card>
        <div slot="header">
          <span>存货类别</span>
          <el-button
            style="float: right"
            type="primary"
            size="small"
            @click="addLevelOneCategory"
          >新增存货类别</el-button>
        </div>
        <el-row>
          <el-col :span="2">
            <span class="transparent-text">123</span>
          </el-col>
          <el-col :span="18">
            <el-tree :data="categoryData" node-key="id" default-expand-all :expand-on-click-node="false">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span>{{ data.name }}</span>
                <span>
                  <el-button type="text" size="mini" @click="() => append(data)"> 增加子类 </el-button>
                  <el-button type="text" size="mini" @click="() => edit(data)"> 修改 </el-button>
                  <el-button type="text" size="mini" @click="() => remove(data)"> 删除 </el-button>
                </span>
              </span>
            </el-tree></el-col>
          <el-col :span="2" />
        </el-row>
      </el-card>
    </el-row>
    <el-dialog :title="'存货类别'" :visible.sync="dialogVisible" width="50%" @close="handleClose">
      <!-- 对话框内容 -->
      <!-- <p>这里是对话框内容</p> -->
      <el-row>
        <el-form ref="categoryForm" :model="categoryForm" label-width="160px">
          <el-form-item label="名称">
            <el-input v-model="categoryForm.name" style="width: 25vw" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="categoryForm.description" style="width: 25vw" />
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="categoryForm.parentPath" disabled style="width: 25vw" />
          </el-form-item>
        </el-form>
      </el-row>

      <!-- 对话框底部操作栏 -->
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddOrUpdateCategory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCategoryTreeApi, addCategoryApi, updateCategoryApi, deleteCategoryApi } from "@/api/product/category";
export default {
  data() {
    return {
      categoryData: [],
      dialogVisible: false,
      categoryForm: {
        name: "",
        description: "",
        id: "",
        parentId: "",
        children: null,
      },
    };
  },
  mounted() {
    this.initCategoryTree();
  },
  methods: {
    clearCategoryForm() {
      this.categoryForm = {
        name: "",
        description: "",
        id: "",
        parentId: "",
        // categoryPath: "",
        // parentPath: "",
        children: null,
      };
    },
    addLevelOneCategory() {
      this.clearCategoryForm();
      this.categoryForm.parentId = "0";
      this.categoryForm.parentPath = "根分类";
      this.dialogVisible = true;
    },
    submitAddOrUpdateCategory() {
      if (this.categoryForm.id === null || this.categoryForm.id === undefined || this.categoryForm.id === "") {
        // 新增
        // if (this.categoryForm.parentId === "0") {
        //   // 新增一级分类
        //   this.categoryForm.categoryPath = this.categoryForm.name;
        // } else {
        //   // 新增子分类
        //   this.categoryForm.categoryPath =
        //     this.categoryForm.parentPath + " / " + this.categoryForm.name;
        // }

        addCategoryApi(this.categoryForm).then((res) => {
          if (res.code !== 200) {
            return this.$message.error("新增失败");
          }
          this.$message.success("新增成功");
          this.dialogVisible = false;
          this.initCategoryTree();
        });
      } else {
        // 编辑
        updateCategoryApi(this.categoryForm).then((res) => {
          if (res.code !== 200) {
            return this.$message.error("编辑失败");
          }
          this.$message.success("编辑成功");
          this.dialogVisible = false;
          this.initCategoryTree();
        });
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    append(data) {
      // console.log("append, data", data);
      this.clearCategoryForm();
      this.categoryForm.parentId = data.id;
      // this.categoryForm.parentPath = data.categoryPath;
      this.dialogVisible = true;
    },
    edit(data) {
      // console.log("edit, data", data);
      this.clearCategoryForm();
      this.categoryForm.id = data.id;
      this.categoryForm.name = data.name;
      this.categoryForm.description = data.description;
      this.categoryForm.parentId = data.parentId;
      // this.categoryForm.parentPath = data.parentPath;
      // this.categoryForm.categoryPath = data.categoryPath;
      this.dialogVisible = true;
    },
    remove(data) {
      // console.log("remove, data", data);
      const params = {
        id: data.id,
      };
      deleteCategoryApi(params).then((res) => {
        if (res.code !== 200) {
          return this.$message.error("删除失败");
        }
        this.$message.success("删除成功");
        this.initCategoryTree();
      });
    },
    initCategoryTree() {
      getCategoryTreeApi().then((res) => {
        if (res.code !== 200) {
          return this.$message.error("获取产品类别失败");
        }
        // console.log("getCategoryTreeApi, res", res);
        // console.log("getCategoryTree, res.data[0].children", res.data[0].children);
        this.categoryData = res.data[0].children;
      });
    },
  },
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.transparent-text {
  opacity: 0; /* 可以替换为0.0到1.0之间的任意值 */
}
</style>
